{% extends 'base.html' %}
{% block title %}
    机架管理
{% endblock %}

{% block status %}
    机架信息
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
        <li class="active">机架管理</li>
    </ol>
{% endblock %}

{% block content %}
    <div class="row">
        <div href="#" class="col-lg-12" style="margin: 0 20px 10px 0">
            <input type="text" size="30" placeholder="搜索" style="height: 30px">
            <select onchange="ChangeType(this)" id="cabinet-search" style="height: 30px;width: 150px">
                <option value="">以 机柜</option>
                <option disabled>----------</option>
                {% for cabinet in cabinet_list %}
                    <option value="{{ cabinet.id }}">{{ cabinet.name }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-inline btn-success" style="height: 30px">搜索</button>
            <a href="/assets/rack_add/" class="pull-right">
                <i class="glyphicon glyphicon-plus"></i>增加机架
            </a>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <table width="100%" class="table table-striped table-hover" id="dataTables-example">
                        <thead>
                            <tr style="color: white;background: #6f7e95;">
                                <th><input type="checkbox" id="checkAll"></th>
                                <th>机柜</th>
                                <th>机架名称</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                            </tr>
                            {% for rack in rack_list %}
                            <tr>
                                <td><input type="checkbox" name="_dataCheckBox"></td>
                                <td><a href="#">{{ rack.name }}</a></td>
                                <td>{{ rack.cabinet.name }}</td>
                                <td>{{ rack.create_time }}</td>
                                <td>{{ rack.update_time }}</td>
                            </tr>
                            {% endfor %}
                        </thead>
                    </table>
                </div>
                <!-- /.panel-body -->
            </div>
        </div>
       <!-- /.col-lg-12 -->
    </div>
    <div class="col-sm-5 pull-left" id="action_buttons" style="font-size: 12px">
      <span id="selected_count">0</span>&nbsp;选择 &nbsp;
      <button class="btn btn-default btn-sm" disabled>启用</button>
      <button class="btn btn-default btn-sm" disabled>禁用</button>
      <button class="btn btn-default btn-sm" disabled>修改</button>
      <button class="btn btn-default btn-sm" disabled onclick="RackDelete()">删除</button>
    </div>
    <div class="pull-right" style="margin-right: 20px">
        {{ count }}&nbsp;机架
    </div>
{% endblock %}

{% block action %}
    <script>
        function ChangeType(doc) {
            var type = $(doc).val();
            location.href="/assets/rack/?type="+type;
            $(this).val(type).attr("selected",true);
        }
        window.onload=function () {
            $("#cabinet-search").find("option[value='{{ type }}']").attr("selected",true);
        }
    </script>
{% endblock %}